<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
				
			function makeClock(canvas,width=500,height=500,scaleLength=width/25,fontSize=width/20,lineWidth=10,
			lineScaleColor='black',dotScaleColor='black',hourArrowColor='black',
			minuteArrowColor='black',scecondArrowColor='black'){
				function makeSkelton(width,height){
					pen.stroke()
					pen.translate(width/2,height/2)
					pen.rotate(Math.PI)
					pen.save()
					pen.beginPath()
					pen.arc(0,0,width/2,0,2*Math.PI)
					pen.stroke()
					pen.closePath()
					
					pen.beginPath()
					pen.arc(0,0,width/50,0,2*Math.PI)
					pen.fill()
					pen.closePath()
				}
				
				function makeScale(divide,color='black',shape=0){
					pen.rotate(Math.PI/divide)
					pen.lineWidth=lineWidth
					
					pen.beginPath()
					if(shape==1){
						pen.strokeStyle=dotScaleColor
						pen.arc(0,width/2-scaleLength,lineWidth/2,0,2*Math.PI)
						pen.fill()
					}
					else{
						pen.strokeStyle=lineScaleColor
						pen.moveTo(0,width/2)
						pen.lineTo(0,width/2-scaleLength)
						pen.stroke()
					}
					pen.closePath()
				}
				
				
				let numDeg=Math.PI
				function makeNum(i){
					if(i>0){
						pen.rotate(Math.PI/6)
					}
					pen.save()
					pen.translate(0,width/2-scaleLength*2)
					pen.rotate(numDeg)
					if(i==0)
						i=12
					pen.font=fontSize+'px 黑体'
					pen.fillText(i,0,0)
					numDeg-=Math.PI/6
					pen.restore()
				}
				function makeHArrow(h,m){
					pen.save()
					pen.lineWidth=HArrowWidth
					pen.strokeStyle=hourArrowColor
					pen.rotate(h*Math.PI/6+(m/60)*Math.PI/6)
					pen.moveTo(0,0)
					pen.lineTo(0,HArrowLength)
					pen.stroke()
					pen.stroke()
				}
				function makeMArrow(m,s){
					pen.save()
					pen.lineWidth=MArrowWidth
					pen.strokeStyle=dotScaleColor
					pen.rotate(m*Math.PI/30+(s/60)*Math.PI/180)
					pen.moveTo(0,0)
					pen.lineTo(0,MArrowLength)
					pen.stroke()
					pen.stroke()
				}
				function makeSArrow(s){
					pen.save()
					pen.lineWidth=SArrowWidth
					pen.strokeStyle=scecondArrowColor
					pen.rotate(s*Math.PI/30)
					pen.moveTo(0,0)
					pen.lineTo(0,SArrowLength)
					pen.stroke()
					pen.stroke()
				}
				
				
				let d=new Date()
				let hour=d.getHours()%12
				let min=d.getMinutes()
				let sec=d.getSeconds()
				
				let SArrowLength=width/2-scaleLength-fontSize*3,HArrowLength=SArrowLength/2,MArrowLength=SArrowLength*3/4
				let SArrowWidth=width/50,HArrowWidth=SArrowWidth/3,MArrowWidth=SArrowWidth*2/3
				
				var pen=canvas.getContext('2d')
				
				makeSkelton(width,height)
				for(let i=0;i<60;i++){
					makeScale(30,'#880011',1)
				}
				for(let i=0;i<12;i++){
					makeScale(6,'#000000')
				}
				pen.translate(7/600*width,(-1)*7/600*width)
				for(let i=0;i<12;i++){
					makeNum(i)
				}
				pen.translate((-1)*11/600*width,7/600*width)
				pen.rotate(Math.PI/6)
				makeHArrow(hour,min)
				pen.restore()
				makeMArrow(min,sec)
				pen.restore()
				makeSArrow(sec)
			}
			
			function handleDay(){
				let d=new Date()
				let year=d.getFullYear()
				let month=d.getMonth()+1
				let date=d.getDate()
				let day=d.getDay()
				let hanZi=['一','二','三','四','五','六','日']
				if(month<10){
					month='0'+month
				}
				if(date<10){
					date='0'+date
				}
				for(let i=1;i<8;i++){
					if(day==i)
						day='星期'+hanZi[i-1]
				}
				
				return year+'年 '+month+'月 '+date+'日 '+day
			}
			
			function makeDate(canvas,x,y,width,height,text,type){
				var pen=canvas.getContext('2d')
				pen.save()
				pen.translate(x,y)
				pen.save()
				pen.translate(-1*width/2,-1*height/2)
				pen.lineWidth=1
				pen.rect(0 ,0 ,width ,height)
				pen.restore()
				let fontLength=height/2*text.length
				pen.font=height/2+'px 宋体'
				if(type=='date'){
					pen.translate(-1*fontLength/3,height/5)
					console.log('?');
				}
					
				else if(type='time'){
					pen.translate(-1*fontLength/4,height/5)
					console.log('?');
				}
					
				pen.stroke()
				pen.fillText(text,0,0)
				pen.restore()
			}
			function getTime(){
				let d=new Date()
				let hour=d.getHours()
				let min=d.getMinutes()
				let sec=d.getSeconds()
				let hanZi=['一','二','三','四','五','六','日']
				if(hour<10){
					hour='0'+hour
				}
				if(min<10){
					min='0'+min
				}
				if(sec<10){
					sec='0'+sec
				}
				return hour+' : '+min+' : '+sec
			}
			
			size=600
			function make(size){
				let c1=document.createElement('canvas')
				getTime()
				document.body.appendChild(c1)
				setInterval(()=>{
					c1.width=size,c1.height=size
					makeDate(c1,size/2,size/3*2,size/100*55,size/12,handleDay(),'date')
					makeDate(c1,size/2,size/3,size/3,size/12,getTime(),'time')
					makeClock(c1,size,size)
				},1000)
			}
			make(300)
			
		</script>
	</body>
</html>
